<template>
  <div class="mt-[20px] mb-[50px]">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :inline="true"
      :rules="formRules"
      class="add-form"
      label-width="85px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="工号" prop="number">
        <el-input v-model="form.number" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="所属学院" prop="college">
        <el-select
          v-model="form.college"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in optList.SSXY"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属系" prop="collegeSystem">
        <el-select
          v-model="form.collegeSystem"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in optList.SSX"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入" />
      </el-form-item>
      <el-form-item v-if="!props.id" label="登录密码" prop="password">
        <el-input
          v-model="form.password"
          type="password"
          autocomplete="new-password"
          clearable
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="民族" prop="nationality">
        <el-select
          v-model="form.nationality"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in optList.MZ"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="出生年月" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          type="date"
          placeholder="请选择"
          value-format="YYYY-MM-DD"
          class="!w-full"
        />
      </el-form-item>
      <el-form-item v-if="props.id" label="" />
      <el-form-item label="学位" prop="degree">
        <el-select
          v-model="form.degree"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in optList.XW"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学历" prop="background">
        <el-select
          v-model="form.background"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in optList.XL"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职称" prop="titleNameList">
        <el-select
          v-model="form.titleNameList"
          clearable
          filterable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in optList.ZC"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职务" prop="position">
        <el-input v-model="form.position" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="研究方向与计划" prop="direction">
        <el-input
          v-model="form.direction"
          type="textarea"
          clearable
          maxlength="200"
          show-word-limit
          :rows="4"
          placeholder="请输入(不可少于50字)"
        />
      </el-form-item>

      <template v-if="!props.id">
        <el-form-item />
        <el-form-item label="用户类型" prop="userType">
          <el-radio-group v-model="form.userType">
            <el-radio :value="0">教师</el-radio>
            <el-radio :value="1">普通管理员</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>

      <el-form-item label="人员构成" prop="bizType">
        <el-radio-group v-model="form.bizType">
          <el-radio :value="1">校内人员</el-radio>
          <el-radio :value="2">校外人员</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item label="合同附件" prop="additionFiles">
        <FileUpload v-model="form.additionFiles" :limit="15" />
      </el-form-item> -->
      <el-form-item label="" />
    </el-form>
  </div>
</template>

<script setup>
import { getUserDetail } from "@/api/system/user";
import { formatDate } from "@/utils/common";
import { isEmail } from "@pureadmin/utils";
import { onMounted, ref } from "vue";
import optList from "./constant";
defineOptions({
  name: "AddUpTeacher"
});

// 传值
const props = defineProps({
  //  1: 新增 2: 编辑
  id: {
    type: Number,
    default: null
  },
  // 操作类型 1：首次登录
  optType: {
    type: Number,
    default: 0
  }
});

const form = ref({
  sex: 1,
  userType: 0,
  bizType: 1
});
const ruleFormRef = ref();
const formRules = {
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  password: [{ required: true, message: "请输入", trigger: "blur" }],
  number: [{ required: true, message: "请输入", trigger: "blur" }],
  collegeSystem: [{ required: true, message: "请选择", trigger: "change" }],
  degree: [{ required: true, message: "请选择", trigger: "change" }],
  background: [{ required: true, message: "请选择", trigger: "change" }],
  titleNameList: [{ required: true, message: "请选择", trigger: "change" }],
  // phone: [
  //   {
  //     required: true,
  //     validator: (rule, value, callback) => {
  //       if (value === "") {
  //         callback(new Error("请输入"));
  //       } else if (!isPhone(value)) {
  //         callback(new Error("请输入正确的手机号码格式"));
  //       } else {
  //         callback();
  //       }
  //     },
  //     trigger: "blur"
  //   }
  // ],
  email: [
    {
      required: false,
      validator: (rule, value, callback) => {
        if (value && !isEmail(value)) {
          callback(new Error("请输入正确的邮箱格式"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
};
if (props.optType == 1) {
  formRules["direction"] = [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入"));
        } else if (value.length <= 50) {
          callback(new Error("不可少于50字"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ];
}

function getRef() {
  return ruleFormRef.value;
}

function getFormVal() {
  return form.value;
}

defineExpose({ getRef, getFormVal });

onMounted(() => {
  if (props.id) {
    getUserDetail({ id: props.id }).then(res => {
      if (res.data?.birthday) {
        res.data.birthday = formatDate(res.data.birthday);
      }
      form.value = res.data;
    });
  }
});
</script>

<style lang="scss" scoped>
.add-form {
  text-align: center;
  .el-form-item {
    width: 42%;
  }
}
</style>
